<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>用户登录</title>
		<link rel="stylesheet" href="../../css/index/iconfont.css" type="text/css" charset="utf-8" />
		<link rel="stylesheet" href="../../css/index/style.css" type="text/css" charset="utf-8" />
		<link rel="stylesheet" href="../../css/index/member.css" type="text/css" charset="utf-8" />
		<link rel="stylesheet" href="../../css/index/mui.min.css" type="text/css" charset="utf-8" />

	</head>
	<style>
		.icon-dianhua:before,
		.icon-yanzhengyanzhengma:before {
			color: white;
		}
		
		.login_con {
			background: #3AB246;
		}
		
		.mui-input {
			margin-top: .8rem;
		}
		
		.pwd_img {
			width: 30px;
			height: 30px;
		}
		
		.login_formbox label~input {
			font-size: 1.1rem;
		}
		
		.oauth-area {
			position: absolute;
			bottom: 20px;
			left: 0px;
			text-align: center;
			width: 100%;
			padding: 0px;
			margin: 0px;
		}
		
		.oauth-area .oauth-btn {
			display: inline-block;
			width: 50px;
			height: 50px;
			background-size: 30px 30px;
			background-position: center center;
			background-repeat: no-repeat;
			margin: 0px 20px;
			/*-webkit-filter: grayscale(100%); */
			border: solid 1px #ddd;
			border-radius: 25px;
		}
		
		.oauth-area .oauth-btn:active {
			border: solid 1px #aaa;
		}
		
		.oauth-area .oauth-btn.disabled {
			background-color: #ddd;
		}
	</style>

	<body>
		<div class="mui-content login_con">
			<div class="login_top"><img src="../../images/index/shop_mobile.png"></div>
			<form id='login-form' class="login_formbox">
				<div class="mui-input-row">
					<label><img src="../../images/index/phone.png" class='pwd_img'></label>
					<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入手机号码">
				</div>
				<div class="mui-input-row">
					<label><img src="../../images/index/pwd.png" class='pwd_img'></label>
					<input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入登录密码">
				</div>
				<input type="hidden" name='type' id="type">
			</form>
			<div style="width: 80%;margin: 0 auto;">
				<button class="mui-btn mui-btn-block login_btn" id='login' style="color: #3ab246;">登录</button>
				<button id='reg' type="button" class="login_btn login_zcbtn" hidden>注 册</button>
			</div>

			<div class="mui-content-padded oauth-area">
				
			</div>
		</div>
	</body>

</html>

<script src="../../js/layer_mobile/layer.js"></script>
<script src="../../js/mui.min.js"></script>
<script src="../../js/mui.enterfocus.js"></script>
<script src="../../js/app.js"></script>
<script src="../../js/m.js"></script>
<script>
	(function($, doc) {
		$.init({
			statusBarBackground: '#f7f7f7'
		});
		$.plusReady(function() {
			plus.screen.lockOrientation("portrait-primary");
			var user = app.getItem("user");
			//localStorage.removeItem("user");

			//检查 "登录状态/锁屏状态" 开始
			if(user) {
				app.open("index");
			} else {
				//第三方登录
				var authBtns = ['weixin']; //配置业务支持的第三方登录
				var auths = {};
				var oauthArea = doc.querySelector('.oauth-area');
				plus.oauth.getServices(function(services) {
					for(var i in services) {
						var service = services[i];
						auths[service.id] = service;
						if(~authBtns.indexOf(service.id)) {
							var isInstalled = app.isInstalled(service.id);
							var btn = document.createElement('div');
							//如果微信未安装，则为不启用状态
							btn.setAttribute('class', 'oauth-btn' + (!isInstalled && service.id === 'weixin' ? (' disabled') : ''));
							btn.authId = service.id;
							btn.style.backgroundImage = 'url("images/' + service.id + '.png")'
							oauthArea.appendChild(btn);
						}
					}
					$(oauthArea).on('tap', '.oauth-btn', function() {
						if(this.classList.contains('disabled')) {
							plus.nativeUI.toast('您尚未安装微信客户端');
							return;
						}
						var auth = auths[this.authId];
						var waiting = plus.nativeUI.showWaiting();
						auth.login(function() {
							waiting.close();
							auth.getUserInfo(function() {
								//plus.nativeUI.toast("获取用户信息成功");
								var data = {};
								var user = auth.userInfo;
								data['openid'] = user['openid'];
								console.log(user['openid']);
								data['unionid'] = user['unionid'];
								data['nickname'] = user['nickname'];
								data['logo'] = user['headimgurl'];
								//请求顶部banner信息
								mui.getJSON(set.api_url + "Api/authlogin", data, function(rsp) {
									if(rsp.code == 200) {
										app.setItem("user", rsp.member);
										set.msg("登录成功");
										setTimeout(set.open("index"), 3000);

									} else {
										plus.nativeUI.toast("登录认证失败");
									}
								});
							}, function(e) {
								plus.nativeUI.toast("获取用户信息失败：" + e.message);
							});
						}, function(e) {
							waiting.close();
							plus.nativeUI.toast("登录认证失败：" + e.message);
						});
					});
				}, function(e) {
					oauthArea.style.display = 'none';
					plus.nativeUI.toast("获取登录认证失败：" + e.message);
				});
			}
			// close splash
			setTimeout(function() {
				//关闭 splash
				plus.navigator.closeSplashscreen();
			}, 600);
			//检查 "登录状态/锁屏状态" 结束
			var loginButton = doc.getElementById('login');
			var accountBox = doc.getElementById('account');
			var passwordBox = doc.getElementById('password');
			var autoLoginButton = doc.getElementById("autoLogin");
			var regButton = doc.getElementById('reg');
			loginButton.addEventListener('tap', function(event) {
				var data = {};
				data['mobile'] = accountBox.value;
				data['password'] = passwordBox.value;
				mui.getJSON(set.api_url + "Api/login", data, function(rsp) {
					if(rsp.code == 200) {
						app.setItem("user", rsp.user_info);
						app.open("index");
					} else {
						plus.nativeUI.toast(rsp.msg);
					}
				});
			});
			$.enterfocus('#login-form input', function() {
				$.trigger(loginButton, 'tap');
			});
			regButton.addEventListener('tap', function(event) {
				$.openWindow({
					url: 'reg.html',
					id: 'reg',
					preload: true,
					show: {
						aniShow: 'pop-in'
					},
					styles: {
						popGesture: 'hide'
					},
					waiting: {
						autoShow: false
					}
				});
			}, false);

			//
			var backButtonPress = 0;
			$.back = function(event) {
				backButtonPress++;
				if(backButtonPress > 1) {
					plus.runtime.quit();
				} else {
					plus.nativeUI.toast('再按一次退出应用');
				}
				setTimeout(function() {
					backButtonPress = 0;
				}, 1000);
				return false;
			};
		});
	}(mui, document));
</script>